﻿<views:MvxPhonePage 
    x:Class="Bulb.UI.WindowsPhone.Views.HomeView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:views="clr-namespace:Cirrious.MvvmCross.WindowsPhone.Views;assembly=Cirrious.MvvmCross.WindowsPhone"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:commandbinding="clr-namespace:Cirrious.MvvmCross.WindowsPhone.Commands;assembly=Cirrious.MvvmCross.WindowsPhone"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <Grid x:Name="LayoutRoot">
        <controls:Panorama Title="{StaticResource ApplicationName}">

            <controls:PanoramaItem>
                <controls:PanoramaItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="\bulb.png" Width="80" Height="80"></Image>
                        <TextBlock Text="{Binding TextSource, Converter={StaticResource Language}, ConverterParameter=BulbHeader, FallbackValue=BulbHeader, Mode=OneWay}"></TextBlock>
                    </StackPanel>
                </controls:PanoramaItem.Header>
                <Grid x:Name="ContentPanel" Margin="12,0,0,0">
                    <ListBox Name="BulbListBox" ItemsSource="{Binding Items, FallbackValue=empty}">
                        
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                            </Style>
                        </ListBox.ItemContainerStyle>

                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <interactivity:Interaction.Triggers>
                                        <interactivity:EventTrigger EventName="Tap">
                                            <commandbinding:MvxEventToCommand Command="{Binding Path=DataContext.ShowDetailCommand, ElementName=BulbListBox}" CommandParameter="{Binding}"/>
                                        </interactivity:EventTrigger>
                                    </interactivity:Interaction.Triggers>
                                    
                                    <toolkit:ContextMenuService.ContextMenu>
                                        <toolkit:ContextMenu>
                                            <toolkit:MenuItem Header="Delete" Command="{Binding Path=DataContext.DeleteCommand, ElementName=BulbListBox}" CommandParameter="{Binding}" />
                                        </toolkit:ContextMenu>
                                    </toolkit:ContextMenuService.ContextMenu>

                                    <toolkit:ToggleSwitch Header="{Binding Name}" IsChecked="{Binding State}" Name="ToggleSwitch">

                                        <interactivity:Interaction.Triggers>
                                            <interactivity:EventTrigger EventName="Checked">
                                                <commandbinding:MvxEventToCommand Command="{Binding Path=DataContext.OnCommand, ElementName=BulbListBox}" CommandParameter="{Binding}"/>
                                            </interactivity:EventTrigger>
                                            <interactivity:EventTrigger EventName="Unchecked">
                                                <commandbinding:MvxEventToCommand Command="{Binding Path=DataContext.OffCommand, ElementName=BulbListBox}" CommandParameter="{Binding}"/>
                                            </interactivity:EventTrigger>
                                        </interactivity:Interaction.Triggers>

                                        <toolkit:ToggleSwitch.HeaderTemplate>
                                            <DataTemplate>
                                                <ContentControl FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="{StaticResource PhoneForegroundBrush}" Content="{Binding}"/>
                                            </DataTemplate>
                                        </toolkit:ToggleSwitch.HeaderTemplate>
                                        
                                        <toolkit:ToggleSwitch.ContentTemplate>
                                            <DataTemplate>
                                                <StackPanel Orientation="Horizontal">
                                                    <Image Width="50" Height="50" Source="{Binding ElementName=ToggleSwitch, Path=DataContext.ImagePath, Converter={StaticResource FilePathToImage}}"></Image>
                                                    <StackPanel Margin="10 0 0 0">
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock Text="{Binding ElementName=BulbListBox, Path=DataContext.TextSource, Converter={StaticResource Language}, ConverterParameter=ToggleLabel, FallbackValue=ToggleLabel, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeSmall}" />
                                                            <TextBlock Text=": " FontSize="{StaticResource PhoneFontSizeSmall}" />
                                                            <ContentControl HorizontalAlignment="Left" FontSize="{StaticResource PhoneFontSizeSmall}" Content="{Binding}"/>
                                                        </StackPanel>
                                                        <TextBlock Text="{Binding ElementName=ToggleSwitch, Path=DataContext.DateTime, Converter={StaticResource TimeAgo}}" FontSize="{StaticResource PhoneFontSizeSmall}" Foreground="{StaticResource PhoneSubtleBrush}"/>    
                                                    </StackPanel>
                                                </StackPanel>
                                            </DataTemplate>
                                        </toolkit:ToggleSwitch.ContentTemplate>
                                    </toolkit:ToggleSwitch>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </controls:PanoramaItem>

            <controls:PanoramaItem 
                Header="{Binding TextSource, Converter={StaticResource Language}, ConverterParameter=SettingsHeader, FallbackValue=SettingsHeader, Mode=OneWay}" 
                DataContext="{Binding SettingsViewModel}">
                <StackPanel>
                    <Button Content="{Binding TextSource, Converter={StaticResource Language}, ConverterParameter=AddBulb, FallbackValue=AddBulb, Mode=OneWay}" Command="{Binding AddCommand}" />
                    <toolkit:ListPicker 
                        Header="{Binding TextSource, Converter={StaticResource Language}, ConverterParameter=LanguageText, FallbackValue=LanguageText, Mode=OneWay}"
                        ItemsSource="{Binding LanguageList}" 
                        SelectedItem="{Binding Language, Mode=TwoWay}" />
                </StackPanel>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

</views:MvxPhonePage>